<template>
  <el-dialog width="70%" :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="dataForm"  :inline="true" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
  
      <el-form-item   label="账户名称" prop="name">
          <el-input v-model="dataForm.name" placeholder="账户名称"></el-input>
      </el-form-item>

          <el-form-item   label="选择接口" prop="apiId">
            <el-select v-model="dataForm.apiId" placeholder="选择接口" filterable clearable>
              <el-option v-for="item in configApis " :key="item.id" :label="item.configKey" :value="item.id">
              </el-option>
            </el-select>
      </el-form-item>

          <!-- <el-form-item  label="运营模式" prop="type">
            <el-radio-group v-model="dataForm.type">
                <el-radio :label="1">正常模式</el-radio>
                <el-radio :label="2">赔付模式</el-radio>
              </el-radio-group>
      </el-form-item> -->

       

      <el-form-item label="所属产品"  prop="productChannel">
           <el-select v-model="dataForm.productChannel" @change="handerProductChannelChange" placeholder="所属产品" filterable clearable>
              <el-option v-for="item in productList " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
              </el-option>
            </el-select>
      </el-form-item>

      <el-form-item    label="所属媒体" prop="mediaChannel">
         <el-select v-model="dataForm.mediaChannel" placeholder="所属媒体" filterable clearable>
              <el-option v-for="item in mediaList " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
              </el-option>
            </el-select>
      </el-form-item>
      <el-form-item   label="所属运营" prop="userName">
            <el-select v-model="dataForm.userName" placeholder="选择运营人员" filterable clearable>
              <el-option v-for="item in userNameList " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
              </el-option>
            </el-select>
      </el-form-item>

      <el-form-item   label="所属商务" prop="business">
            <el-select v-model="dataForm.business" placeholder="选择运营人员" filterable clearable>
              <el-option v-for="item in businessList " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
              </el-option>
            </el-select>
      </el-form-item>


          <el-form-item label="当日限量" prop="dayLimitNumber">
          <el-input v-model="dataForm.dayLimitNumber" placeholder="当日限量"></el-input>
      </el-form-item>

          <el-form-item label="总的限量" prop="totalLimitNumber">
          <el-input v-model="dataForm.totalLimitNumber" placeholder="总的限量"></el-input>
      </el-form-item>
         
          <el-form-item  v-if="dataForm.productChannel=='tbunion' "  label="渠道ID" prop="channelId">
          <el-input v-model="dataForm.channelId" placeholder="渠道ID"></el-input>
      </el-form-item>

          <el-form-item  v-if="dataForm.productChannel=='tbunion' " label="任务ID" prop="taskId">
          <el-input v-model="dataForm.taskId" placeholder="任务ID"></el-input>
      </el-form-item>
      
          <el-form-item     label="广告位ID" prop="tagId">
          <el-input v-model="dataForm.tagId" placeholder="广告位ID"></el-input>
      </el-form-item>
      <el-form-item  v-if="dataForm.productChannel=='tbunion' "  label="流量来源" prop="planId">
        <el-select v-model="dataForm.planId" placeholder="选择来源流量平台">
              <el-option
                v-for="item in platforms"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
      </el-form-item>
        <!-- <el-form-item v-if="dataForm.productChannel=='tbunion' " label="计划ID" prop="planId">
          <el-input v-model="dataForm.planId" placeholder="计划ID"></el-input>
      </el-form-item> -->
          <!-- <el-form-item label="回掉去重" prop="callType">
             <el-radio-group v-model="dataForm.callType">
                <el-radio :label="1">不去重</el-radio>
                <el-radio :label="2">去重</el-radio>
              </el-radio-group>
        </el-form-item> -->
        <el-form-item label="产品密钥" prop="productKey">
          <el-input v-model="dataForm.productKey" placeholder="产品Key"></el-input>
      </el-form-item>

     
        <el-form-item label="媒体密钥" prop="mediaKey">
          <el-input v-model="dataForm.mediaKey" placeholder="媒体的key"></el-input>
      </el-form-item>
      <el-form-item v-if="dataForm.mediaChannel=='vivo' " label="srcId" prop="srcId">
          <el-input v-model="dataForm.srcId" placeholder="数据源"></el-input>
      </el-form-item>

      <el-form-item label="账户ID" prop="aid">
          <el-input v-model="dataForm.aid" placeholder="账户ID"></el-input>
      </el-form-item>
      <el-form-item v-if="dataForm.mediaChannel=='zfb' "  label="应用ID" prop="appId">
          <el-input v-model="dataForm.appId" placeholder="应用ID"></el-input>
      </el-form-item>
      <el-form-item v-if="dataForm.mediaChannel=='zfb' " label="账户私钥" prop="privateKey">
          <el-input v-model="dataForm.privateKey" placeholder="账户私钥"></el-input>
      </el-form-item>
      <el-form-item v-if="dataForm.mediaChannel=='zfb' "  label="账户公钥" prop="publicKey">
          <el-input v-model="dataForm.publicKey" placeholder="账户公钥"></el-input>
      </el-form-item>

      <el-form-item label="默认值" prop="defaultKey">
          <el-input v-model="dataForm.defaultKey" placeholder="产品转化默认值"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="callType">
             <el-radio-group v-model="dataForm.status">
              <el-radio label='1'>开启</el-radio>
              <el-radio label='2'>关闭</el-radio>
              </el-radio-group>
        </el-form-item>

        <el-form-item label="计费指标" prop="keyType">
          <el-radio-group v-model="dataForm.keyType">
            <el-radio v-for="item in keyTypeList" :key="item.dictValue" :label="item.dictValue">
              {{ item.dictLabel }}
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="上报类型" prop="reportType">
             <el-radio-group v-model="dataForm.reportType">
              <el-radio :label=1>正常</el-radio>
              <el-radio :label=2>虚拟回传</el-radio>
              </el-radio-group>
        </el-form-item>



      </el-form>

      
      <el-form :inline="true" class="reportUrlForm">
        <el-divider  content-position="left"  v-if="dataForm.apiId=='9999' ">
            <h3>监测上报地址配置</h3>
        </el-divider>
        <el-form-item v-if="dataForm.apiId=='9999' "  label="监测地址" prop="reportUrl">
            <el-input  type="text" class="reportUrlItem" v-model="dataForm.reportUrl" placeholder="监测上报地址"></el-input>
        </el-form-item>
    </el-form>


    
      <el-divider  content-position="left" ><h3>映射关系配置</h3></el-divider>

      <el-form id="dynaddAndupdate"  >
        <el-form-item
          v-for="(domain, index) in this.dataForm.typeLists"
          :label="'投放产品-渠道转换映射关系:' "
          :key="domain.key"
          :prop="'domains.' + index + '.value'"
        >
        <el-row :gutter="10">
        <el-col :span="3">
          <el-input v-model="domain.productReturnType" placeholder="产品端转化指标"></el-input>
        </el-col>
        <el-col :span="1"></el-col>
        
        <el-col :span="3">
          <el-input v-model="domain.mediaReturnType" placeholder="媒体转化指标"></el-input>
        </el-col>
        <el-col :span="3">
          <el-input v-model="domain.key" placeholder="媒体转化指标密钥" ></el-input>
        </el-col>
        <el-button @click.prevent="addData(domain)">增加</el-button>
        <el-button @click.prevent="removeData(domain)">删除</el-button>
      </el-row>
       
    
        </el-form-item>

      </el-form>


      <el-divider content-position="left"><h3>回传率配置</h3></el-divider>
      <el-form  :inline="true">
     
          <el-form-item label="整体回传率" prop="per">
          <el-input v-model="dataForm.per" placeholder="整体回传率"></el-input>
      </el-form-item>
      <el-form-item label="激活回传率" prop="actPer">
          <el-input v-model="dataForm.actPer" placeholder="激活回传率"></el-input>
      </el-form-item>
      <el-form-item label="注册回传率" prop="registerPer">
          <el-input v-model="dataForm.registerPer" placeholder="注册回传率"></el-input>
      </el-form-item>
      <el-form-item label="付费回传率" prop="payPer">
          <el-input v-model="dataForm.payPer" placeholder="付费回传率"></el-input>
      </el-form-item>
      <el-form-item label="次留回传率" prop="retainPer">
          <el-input v-model="dataForm.retainPer" placeholder="次留回传率"></el-input>
      </el-form-item>
      <el-form-item label="唤醒回传率" prop="wakeupPer">
          <el-input v-model="dataForm.wakeupPer"  placeholder="唤醒回传率"></el-input>
      </el-form-item>
      <el-form-item label="红包回传率" prop="retainPer">
          <el-input v-model="dataForm.redPer" placeholder="红包回传率"></el-input>
      </el-form-item>
      <el-form-item label="订单回传率" prop="wakeupPer">
          <el-input v-model="dataForm.hprofitPer"  placeholder="订单回传率"></el-input>
      </el-form-item>
      </el-form>
    <template slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
import { getDictDataList } from '@/utils'
import moment from 'moment';

export default {
  data () {
    return {
      visible: false,
      platforms: [
        { value: '1', label: 'DSP' },
        { value: '2', label: '爱奇艺' },
        { value: '3', label: '百度' },
        { value: '4', label: '灯火' },
        { value: '5', label: '快手' },
        { value: '6', label: '汇川' },
        { value: '7', label: '腾讯' },
        { value: '8', label: '微博' },
        { value: '9', label: '优酷' },
        { value: '10', label: '字节' },
        { value: '11', label: '华为信息流' },
        { value: '12', label: 'oppo 信息流' },
        { value: '13', label: 'vivo 信息流' },
        { value: '14', label: '小米信息流' },
        { value: '15', label: '荣耀信息流' },
        { value: '0', label: '其他信息流平台' },
      ],
      dataForm: {
        id: '',
        name: '',
        apiId: '',
        type: 1,
        business: '',
        userName:'',
        productChannel: 'tbunion',
        mediaChannel: '',
        dayLimitNumber: '',
        totalLimitNumber: '',
        mediaKey: '',
        channelId: '',
        taskId: '',
        tagId: '',
        planId: '',
        callTypeRelat: '',
        productPer: '',
        status: '1',
        callType: 2,
        updateTime: '',
        createTime: '',
        depthCallType:'',
        per:1,
        actPer:'',
        payPer:'',
        registerPer:'',
        retainPer:'',
        wakeupPer:'',
        reportUrl:'',
        reportType:1,
        typeLists: [{
          productReturnType: '',
          mediaReturnType:'',
          key:''
          }],
          keyType:'',
          aid:'',
          defaultKey:''
      },
    
      
      callTypeList:[],
      configApis:[],
      businessList:[],
      mediaList:[],
      userNameList: [],
      productList:[],
      productCallTypeList:[],
      keyTypeList:[],
    }
  },
  computed: {
    dataRule () {
      return {
        name: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        apiId: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        type: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        business: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        productChannel: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        mediaChannel: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
       
      }
    }
  },
  mounted() {
    this.listAllConifg();
    this.getBusinessDict();
    this.getProductList();
    this.getMediaList();
    this.getCallTypeList();
    this.getNameDict();
    this.getKeyTypeList();
    this.handerProductChannelChange();
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          this.getInfo()
        }
      })
    },

    // 获取信息
    getInfo () {
      this.$http.get(`/adx/ocpxaccount/${this.dataForm.id}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        }
      }).catch(() => {})
    },
    getKeyTypeList() {
      this.keyTypeList = getDictDataList("typeList")
    },
    handerProductChannelChange(){
    
      //当选中产品发生改变的时候，内容会发生变化
      this.productCallTypeList = getDictDataList("callType_"+this.dataForm.productChannel)

    },
    listAllConifg(){
      return this.$http.get('/adx/ocpxconfig/listAll').then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }else{
          this.configApis=res.data;
        }
      }).catch(() => { })
  },
    getBusinessDict() {
      this.businessList = getDictDataList("businessList")
    },
    addData(domain){
      //添加数据
      let  data={ productReturnType: '',mediaReturnType:'',key:''}
      this.dataForm.typeLists.push(data);
    },
    removeData(item){
      var index = this.dataForm.typeLists.indexOf(item)
      console.log("索引："+index);
        if (index !== -1) {
          if(this.dataForm.typeLists.length==1){
            this.$message({
              message: '至少保留一条数据转化映射',
              type: 'warning'
            });
          }else{
            this.dataForm.typeLists.splice(index, 1)
          }
          
        }
    },
    getNameDict() {
      this.userNameList = getDictDataList("userNameList")

    },
    getCallTypeList(){
      this.callTypeList = getDictDataList("callTypeList")
    },
    getMediaList() {
      this.mediaList = getDictDataList("mediaList")
    },
       getProductList() {
      this.productList = getDictDataList("productList")
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        this.$http[!this.dataForm.id ? 'post' : 'put']('/adx/ocpxaccount/', this.dataForm).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        }).catch(() => {})
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
<style lang="css" scoped>
.el-form--inline .el-form-item {
    display: inline-block;
    margin-right: 100px;
    vertical-align: top;
}
.el-select{
  width: 190px;
}
.reportUrlItem{
  width: 600px;
}
</style>